<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="static/css/bootstrap.css">
  <link rel="stylesheet" href="static/css/bootstrap-table.css">
  <script src="static/js/jquery-3.3.1.min.js"></script>
  <script src="static/js/bootstrap.js"></script>
  <script src="static/js/bootstrap-table.js"></script>
  <script src="static/js/bootstrap-table-zh-CN.js"></script>

</head>
<body>
<div class="col-lg-12" style="height: 80px;"></div>
<div class="col-lg-2"></div>
<div class="col-lg-8">
  <table id="table1"></table>
</div>
<div class="col-lg-2"></div>
</body>
<script>
    $(function () {
        $("#table1").bootstrapTable({
            url: "/person/list",
            pagination: "true",
            sidePagination: "server",
            sortName: "age",
            sortOrder: "desc",
            columns: [
                {
                    field: "id",
                    title: "ID"
                },
                {
                    field: "name",
                    title: "姓名"
                },
                {
                    field: "age",
                    title: "年龄",
                    sortable: "true"
                },
                {
                    field: "photo",
                    title: "头像",
                    formatter: function (value, row, index) {
                        var a = "<img style='width: 50px;' src='"+value+"'>";
                        return a;
                    }
                },
                {
                    field: "id",
                    title: "操作",
                    formatter: function(value, row, index){
                        var a =
                            "<button class='btn btn-danger btn-sm' onclick='del("+value+");'>删除</button>";
                        return a;
                    }
                }
            ]
        });
    })
  function del(id){
        $.ajax({
            url: "/person/deleteById?id="+id,
            success: function(rs){
                $("#table1").bootstrapTable("refresh");
            }
        });
  }
</script>
</html>